<template>
	<view class="content">
		<view class="list">
			<view class="invoice-item" v-for="(item, index) in vehicleList" :key="index">
				<text class="tag" v-if="item.isDefault">默认</text>
			
				<view class="plate-number" @click="changeEvent(index)">
					<text class="plate-item" v-for="number in item.plateNumber">{{ number }}</text>
				</view>
				
				<view class="info" style="flex-wrap: wrap;" @click="changeEvent(index)">
					<view class="flex flex-between" style="margin-bottom: 10rpx;">
						<view class="info-item" style="flex: 1;font-size: 28rpx;color: #666;">品牌：{{ item.brand }}</view>
						<view class="info-item" style="flex: 1;font-size: 28rpx;color: #666;">颜色：{{ item.color }}</view>
						<view class="info-item" style="flex: 1;font-size: 28rpx;color: #666;">类型：{{ item.vehicleType }}</view>
					</view>
					<view class="info-item" style="flex: 1;font-size: 28rpx;color: #666;">车架号：{{ item.vin || '-' }}</view>
				</view>
				
				<view class="options flex flex-between">
					<u-tag v-if="item.defaultSelected == 1" text="默认" size="mini" type="error"></u-tag>
					<view class="flex" @click="setDefault(index)" v-else>
						<u-icon name="checkbox-mark" color="#333" size="16"></u-icon>
						<text class="default">设为默认</text>
					</view>
					
					<view class="flex">
						<view class="flex" @tap="editVehicle(item)">
							<u-icon name="edit-pen" color="#AAAAAA"></u-icon>
							<text class="edit">编辑</text>
						</view>
						<view class="flex" style="margin-left: 40rpx;" @tap="deleteVehicle(item)">
							<u-icon name="trash" color="#AAAAAA"></u-icon>
							<text class="edit">删除</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="empty" v-if="vehicleList.length == 0">
				<u-empty mode="data"></u-empty>
			</view>
			
			<view style="height: 120rpx;"></view>
			
			<view class="footer">
				<u-button color="#1C6EFB" shape="circle" text="新增车牌信息" @click="addCarInfo"></u-button>
			</view>
		</view>
		<keyboard-plate ref="plateNumber" :safeArea="true" :plateNum.sync="plateNum" @change="getPlateNum" isShow></keyboard-plate>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				invoiceList: [{
						isDefault: true
					},
					{
						isDefault: false
					},
				],
				plateNum: '',
				vehicleList: [],
				editingId: null,
				type: ''
			}
		},
		onLoad({ type }) {
			this.type = type;
		},
		onShow() {
			this.getVehicleList();
		},
		methods: {
			
			// 车牌切换事件
			changeEvent(index) {
				if (!this.type) return;
				const item = this.vehicleList[index];
				uni.$emit('updateCarInfoEvent', item);
				setTimeout(() => uni.navigateBack(), 100);
			},
			
			getVehicleList() {
				this.$http_api.userVehicleList({}).then((res) => {
					this.vehicleList = res.map(item => {
						let plateNumberArray = Array.from(item.plateNumber);
						item.plateNumber = plateNumberArray;
						return item;
					});
				})
			},
			
			getPlateNum(e){
				const params = {
					plateNumber: e.value,
					brand: '小米',
					vehicleType: '新能源',
					color: '黄色',
					defaultSelected: 1
				};
				const request = this.editingId 
					? this.$http_api.editUserVehicle({ ...params, vehicleId: this.editingId })
					: this.$http_api.addUserVehicle(params);
				request.then(() => {
					uni.$u.toast(this.editingId ? '修改成功' : '新增成功');
					this.editingId = null;
					setTimeout(() => this.getVehicleList(), 1000)
				});
			},
			
			addCarInfo() {
				// this.$refs.plateNumber.open();
				uni.navigateTo({
					url: '/pages/user/users/car/edit'
				})
			},
			
			deleteVehicle(item) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该车辆信息吗？',
					success: (res) => {
						if (res.confirm) {
							this.$http_api.delUserVehicle({
								id: item.id
							}).then(() => {
								uni.$u.toast('删除成功');
								this.getVehicleList();
							})
						}
					}
				});
			},
			
			editVehicle(item) {
				// this.$refs.plateNumber.open();
				// this.plateNum = item.plateNumber.join('').replace('•', '');
				// this.editingId = item.id;
				uni.setStorage({
					key: 'vehicleEditInfo',
					data: item,
					success: () => {
						uni.navigateTo({
							url: '/pages/user/users/car/edit?id=' + item.id
						})
					}
				})
			},
			
			setDefault(index) {
				const item = this.vehicleList[index];
				const params = {
					vehicleId: item.id,
					plateNumber: item.plateNumber.join(''),
					brand: item.brand,
					vehicleType: item.vehicleType,
					color: item.color,
					vin: item.vin,
					defaultSelected: 1
				};
				this.$http_api.editUserVehicle(params).then(() => {
					uni.$u.toast('修改成功');
					setTimeout(() => this.getVehicleList(), 1000)
				});
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.list {
		padding: 20rpx;
	}
	
	.options {
		border-top: 1rpx solid #eee;
		padding-top: 20rpx;
		margin-top: 20rpx;
	}
	
	.default {
		font-size: 24rpx;
		font-family: "PINGFANG";
		font-weight: 400;
		color: #333;
	}
	
	.edit {
		color: #AAA;
		font-size: 24rpx;
		font-family: "PINGFANG";
		font-weight: 400;
	}
	
	.plate-number {
		display: flex;
		justify-content: space-between;
		margin: 30rpx 0 20rpx 0;
		
		.plate-item {
			width: 60rpx;
			height: 60rpx;
			background: #F8F9FC;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 29rpx;
			color: #333;
			font-weight: 400;
			font-family: "PINGFANG";
		}
	}
	
	.invoice-item {
		background: #FFFFFF;
		border-radius: 28rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		position: relative;
		overflow: hidden;

		.tag {
			padding: 6rpx 18rpx;
			background: #FF4600;
			border-radius: 4rpx;
			font-size: 22rpx;
			color: #fff;
			font-family: "PINGFANG";
			position: absolute;
			left: 0;
			top: 0;
			border-radius: 28rpx 0 28rpx 0;
		}

		.item-header {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			border-bottom: 1rpx solid #eee;
			padding: 20rpx 0;

			.title {
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
				margin-right: 20rpx;
				font-family: "PINGFANG";
			}

			.type {
				font-family: "PINGFANG";
				font-weight: 600;
				font-size: 26rpx;
				color: #777777;
			}
		}
	}
	
	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #FFFFFF;
		padding: 20rpx 40rpx;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}
</style>